<template>
   <div class="Back">
      <div id="Reply" class="overflow-auto">
          <ReplyHead id="ReplyHead" class="flex box" />
          <div id="ReplyContent">
               <transition v-for="item in ReplyData" :key="item.id" class="box" name="leftToRight"> 
               <div class="box" v-if="item && item.deleted == 0">
                     <DiscussInfo :discuss="item" class="DiscussOne flex " />
               </div>
               </transition>
           </div>
           <!-- 分页器 -->
          <Pagination id="Pagination" class="flex box" :PageInfo="ReplyInfo" :changePage="changePage"  v-if="ReplyInfo.total > ReplyInfo.pageSize"/>
      </div>
   </div>
</template>
<script>
import Pagination from '@/components/Package/Pagination/Pagination.vue'
import ReplyContent from './ReplyContent/ReplyContent.vue'
import ReplyFoot from './ReplyFoot/ReplyFoot.vue'
import ReplyHead from './ReplyHead/ReplyHead.vue'
import { mapState,mapActions} from 'vuex'
import DiscussInfo from '../Discuss/DiscussInfo/DiscussInfo.vue'
  export default 
  {
     components: { ReplyHead, ReplyContent, ReplyFoot, Pagination, DiscussInfo },
     name :'', 
     computed:{
       ...mapState('Discuss',['ReplyInfo','ReplyDiscussInfo','ReplyData'])
     },
     methods:{
      ...mapActions('Discuss',['getReply']),
       async init(){
            let discussId = this.ReplyDiscussInfo?.id || 0
            let res = await this.getReply(discussId)
            if(res.code != 200) this.$message.error(res.message)
        },
       async changePage(newPageno){
            this.ReplyInfo.pageNo=newPageno
            if(newPageno<=0) newPageno =1
            await this.init();
         }
     },
     created(){
       this.init()
     },
     mounted() {
        document.body.style.overflow='hidden'
     },
     beforeDestroy(){
        document.body.style.overflow='auto'
     }

  }
</script>
<style scoped lang='less'>
#Reply{
    min-width: 350px;
    max-width: 700px;
    width: 90%;
     max-height: 90vh;
    background: var(--BackColor);
    border-radius:10px ;
    overflow: auto;

}
.box{
   width: 100%;
    background: var(--GeneralBackColor-half);
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
}
#ReplyHead{
    border-bottom: 2px solid var(--BackColor);
    flex-wrap: nowrap;
    position: sticky;
    top: 0; 
}
#ReplyContent{
    justify-content: center;
    display: block;
    background: var(--GeneralBackColor-half);
}
.DiscussOne{
   width: 100%;
   padding: 5px;
   box-sizing: border-box;
   margin-top: 5px;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: nowrap;
}
#ReplyFoot{
     flex-wrap: nowrap;
     align-items: center;
}
#Pagination{
    position: sticky;
    bottom:  0;
   border-top: 2px solid var(--BackColor);
    padding: 0;
   height: 60px;
   justify-content: center;
   align-items: center;
}
</style>